<template>
  <!-- 分页 -->
  <el-pagination v-if="data.total" class="page"
    :total="data.total"
    :current-page="data.currentPage"
    :page-size="data.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>
</template>

<script>
export default {
  name: "pagination",
  components: {},
  props: {
    data:{
      type: Object,
      default:() =>{}
    }
  },
  data () {
    return {
      
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 分页:每页多少条
    handleSizeChange(val){
      this.$emit('handleSize',val);
    },
    // 分页:当前页显示多少条
    handleCurrentChange(val){
      this.$emit('handleCurrent',val);
    },
  },
}
</script>

<style lang="less" scoped>
.page{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 30px;
  margin-right: 20px;
}
</style>